<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/token.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="div">
    <template>
        <div class="dept-box">
            <el-row>
                <el-col :span="24">
                    <div class="tool-box">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                                   @click="openFormToAdd">新增
                        </el-button>
                    </div>
                </el-col>
            </el-row>

            <!--展示数据表格-->
            <el-table :data="list" style="width: 100%">
                <el-table-column
                        prop="userName"
                        label="姓名"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.gender==1 ? '女' : '男' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="部门"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="joinDate"
                        label="入职时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.state ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="openFormToUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="openToDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页条-->
            <el-pagination
                    background
                    :current-page="page"
                    :page-size="5"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    @current-change="pageChange">
            </el-pagination>


            <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="姓名" prop="userName" label-width="50px">
                        <el-input v-model="form.userName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" label-width="50px">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" prop="deptId" label-width="50px">
                        <el-tree :data="depts" :props="{label:'deptName'}" :expand-on-click-node="false"
                                 ref="tree" node-key="deptId" highlight-current></el-tree>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender" label-width="50px">
                        <el-radio v-model="form.gender" label="0">男</el-radio>
                        <el-radio v-model="form.gender" label="1">女</el-radio>
                    </el-form-item>
                    <el-form-item label="入职" label-width="50px">
                        <el-date-picker
                                v-model="form.joinDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态" label-width="50px">
                        <el-switch v-model="form.state" active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-value="1"
                                   :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </template>
</div>
<script>
    let vue = new Vue({
        el: "#div",
        data: {
            list: [
               /* {userName:"马总",gender:1,deptName:"集团总部",joinDate:"2016-03-22"},
                 {userName:"李总",gender:1,deptName:"集团总部",joinDate:"2016-03-22"}*/
            ], /* 表示当前页数据 */
            page: 1, /* 表示页号 */
            total: 0, /* 总记录数 */
            form: {
                userId: '',
                userName: '',
                password: '',
                deptId: '',
                email: '',
                gender: '',
                telephone: '',
                birthday: '',
                joinDate: '',
                state: 0
            }, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
            formVisible: false, /* 控制新增和修改表单可见性 */
            dialogTitle: '', /* 控制新增和修改表单标题 */
            rules: {
                /*name: [
                  { required: true, message: '请输入名称', trigger: 'blur' },
                  { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ]*/
            }, /* 表单校验规则 */
            depts: [
                /*{
                  deptName: '集团总部',
                  deptId:"100",
                  children: [{
                    deptName: '顺义校区',
                    deptId:"100101",
                    children: [{
                      deptName: '顺义教研部',
                      deptId:"100101101"
                    },
                      {
                        deptName: '顺义人事部',
                        deptId:"100101102"
                      }]
                  }]
                }*/
            ],

            /*编辑角色*/
            roleFormVisible: false,
            currentUserId: '',
            roles: []
        },
        mounted() {
            this.findAll(1);
            this.findAllDept();
        }, /* data 初始化操作 */
        methods: {
            findAllDept() {
                axios.get("deptServlet?method=findAll")
                    .then(resp=>{
                        if (resp.data.flag){
                            this.depts = resp.data.resultData;
                        }else {
                            this.$message.error(resp.data.message)
                        }
                    })
                    .catch(()=>{
                        this.$message.error("请求失败");
                    })
            },
            findAll(page) {
                axios.get("userServlet?method=findByPage&currentPage=" + page)
                    .then(resp => {
                        if (resp.data.flag) {
                            this.list = resp.data.resultData.list;
                            this.total = resp.data.resultData.total;
                            this.page = resp.data.resultDate.pageNum;
                        } else {
                            this.$message.error(resp.data.message)
                        }
                    })/*.catch(error => {
                    this.$message.error("请求失败");
                })*/
            },
            delete(id) {
                axios.get("userServlet?method=delete&userId=" + id)
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("删除成功!")
                            this.findAll(1);
                        } else {
                            this.$message.error(resp.data.message)
                        }
                    })
                    .catch(() => {
                        this.$message.error("请求错误!")
                    })
            },
            add(formData) {
                axios.post("userServlet", formData + "&method=add")
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("添加成功!")
                            this.findAll(1);
                        } else {
                            this.$message.error(resp.data.message)
                        }
                    })
                    .catch(() => {
                        this.$message.error("请求错误!")
                    })
            },
            update(formData) {
                axios.post("userServlet", formData + "&method=update")
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("修改成功!")
                            this.findAll(1);
                        } else {
                            this.$message.error(resp.data.message)
                        }
                    })
                    .catch(() => {
                        this.$message.error("请求错误!")
                    })
            },
            pageChange(page) {
                this.findAll(page)
            },
            openToDelete(row) {
                this.$confirm('确定删除 【' + row.userName + '】 吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.delete(row.userId);
                })
            },
            getStringParameter(formData) {
                let param = "";
                for (let property in formData) {
                    if (formData[property] != null) {
                        param += property + "=" + formData[property] + "&"
                    }
                }
                param = param.substring(0, param.length - 1);
                return param;
            },
            openFormToAdd() {
                this.dialogTitle = '新增';
                this.formVisible = true;
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(null)
                })
            },
            openFormToUpdate(row) {
                this.dialogTitle = '修改';
                this.formVisible = true;

                this.form =row;
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(row.deptId)
                })
            },
            confirmForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let id = this.form.userId;
                        this.form.deptId = this.$refs.tree.getCurrentKey();
                        let formData = this.getStringParameter(this.form);
                        if (id) {
                            this.update(formData);
                        } else {
                            this.add(formData);
                        }
                        this.formVisible = false
                    }
                })
            },
            closeForm(formName) {
                this.$refs[formName].clearValidate();
                Object.assign(this.form, this.backup)
            }
        }
    });
</script>

<style>
    .dept-box {
        width: 100%;
    }

    .dept-box .tool-box {
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
    }

    .dept-box .el-pagination {
        margin-top: 20px;
    }
</style>
</body>
</html>